<template>
  <div class="Header">
    <router-link :to="{ name: 'root' }">
      <img src="../assets/bbs.svg" />
    </router-link>
    <i>模拟论坛</i>
    <span><a href="#" @click="ale">关于</a></span>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {};
  },
  methods: {
    ale() {
      alert("论坛示例");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Header {
  background: #5a5555;
  height: 50px;
}
a {
  text-decoration: none;
  color: #fff;
}
img {
  max-width: 50px;
  margin-left: 50px;
}
i {
  color: #fff;
  margin-left: 10px;
  margin-top: 15px;
  position: absolute;
}
span {
  float: right;
  margin-right: 50px;
  margin-top: 10px;
}
</style>
